<template>
<div>
      <!--国际化语言开关-->
      <h-switch v-model="lang" @change="lang_change">中/英</h-switch>
      {{ $t('language_package.title') }}
      {{ $t('language_package.introduce') }}

    <!--上传视频地址-->
    <video id="video"  v-show="videosrc" width="300" height="200" :src="videosrc" controls="controls"
           autoplay="autoplay" muted>视频</video>
      <br>
      <Button color="red" @click="changepic">{{ mybutton }}</Button>
      <br>

<table>
        <tr>
          <td>七牛云上传</td>
          <td>
              <input type="file" @change="upload_qiniu">
          </td>
        </tr>
        <tr>
          <td>视频进度展示</td>
          <td>
              {{loadpercent}}
            <br>
            <Progress v-show="loadpercent_int" :percent="loadpercent_int" color="green">
              <span slot="title"></span>
              <span slot="text">{{loadpercent_int}}%</span>
            </Progress>
          </td>
        </tr>

</table>
</div>
</template>

<script>
    export default {
        name: "qiniu",
      data() {
        return{
            lang: false,
            src:'',
           //获取七牛上传凭证
            uptoken:'',
            //视频地址
            videosrc:'',
            //上传进度展示
            loadpercent:'',
            // 整形
            loadpercent_int:0,
            //切换按钮变量
            mybutton:'进入画中画'
        }
      },
      mounted:function(){
          // 获取uptoken  调用
          this.get_uptoken();

          //获取用户信息
          //发送请求
          this.axios.get(
              'http://127.0.0.1:8000/qiniuuser/',
                {params:{uid:localStorage.getItem('uid')}}).then(res=>{
                console.log(res);
                // 赋值
                this.videosrc = 'http://q79txmm3c.bkt.clouddn.com/' + res.data.img;
            });


      },
      methods:{
          // 语言切换事件
        lang_change: function () {
          console.log(this.lang);

          //判断语言
          if (this.lang === true) {
            //英文
            this.$i18n.locale = 'english';
            localStorage.setItem('lang', 'english')
          } else {
            //单选
            this.$i18n.locale = 'Chinese';
            localStorage.setItem('lang', 'Chinese')
          }
        },

          // 定义画中画切换
          changepic:function(){

            //判断是否处于画中画界面
            if(video !== document.pictureInPictureElement){
              //尝试进入画中画
              video.requestPictureInPicture();
              this.mybutton = '退出画中画'
            }else {
              //退出画中画
              document.exitPictureInPicture();
              this.mybutton = '进入画中画'
            }

          },

          //获取七牛凭证
          get_uptoken(){
            this.axios({
              url:'http://127.0.0.1:8000/qiniuken/',
              method:'get'
            }).then(res=>{
              console.log(res)
              this.uptoken = res.data.token
            })
          },

          // 上传七牛
          upload_qiniu:function(e){

            //打印uptoken，测试有没有数据
            console.log(this.uptoken);

            //获取文件对象
            let file = e.target.files[0];
            //声明参数
            let param = new FormData();
            //将上传凭证添加参数
            param.append('token', this.uptoken);  //后端token等于this.uptoken
            //附加文件
            param.append('file', file);
            //定制axios
            const axios_qiniu = this.axios.create({withCredentials:false});  //声明withCredentials：false 不能带着cookie
            //发送请求
            axios_qiniu({
              method: 'POST',
              url:'http://up-z1.qiniu.com/',  //华北区url
              data:param,
              timeout:3000, //设置超时时间
              //设置上传进度
              onUploadProgress:(e) => {

                //设置总进度对象 已上传字节数 / 总字节数
                var complete = (e.loaded / e.total);

                //安慰剂按钮
                if(complete < 1){
                  this.loadpercent = (complete * 100).toFixed(2) + '%';

                  this.loadpercent_int = parseInt((complete * 100).toFixed(2));
                }

              }
            }).then(res=>{
              console.log(res);
              //视频地址
              this.videosrc = 'http://q79txmm3c.bkt.clouddn.com/' + res.data.key;


              //上传成功  强行100%
              this.loadpercent = '100%';
              this.loadpercent_int = 100;
            })

          },

      }
    }
</script>

<style scoped>

</style>
